<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>发起fetch请求</title>
  </head>
  <body>
    <!-- HTML 部分 -->
<input type="file" id="fileInput" multiple>
<button onclick="uploadFiles()">上传并合并文件</button>

<script>
function uploadFiles() {
  const input = document.getElementById('fileInput');
  const files = input.files;
  const formData = new FormData();

  // 注意这里的字段名称必须与后端接收的 @RequestParam("files") 对应
  for (let i = 0; i < files.length; i++) {
    formData.append('files', files[i]);
  }
debugger
  fetch('http://172.20.10.5:8089/api/files/merge', {
    method: 'POST',
    body: formData
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('网络错误');
    }
    // 后端返回的是 PDF 文件的字节流，转换为 Blob 对象
    return response.blob();
  })
  .then(blob => {
    // 创建一个下载链接
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'merged.pdf';
    document.body.appendChild(a);
    a.click();
    a.remove();
  })
  .catch(error => console.error('上传错误:', error));
}
</script>
  </body>
</html>
